@import url("var.less");
@import url("reset.less");
@import url("tools.less");

html,body{
    width: 100%;
    height: 100%;
    font-size: 0.525rem;
    background: #fff;
    font-family: "微软雅黑";
}

//标题开始
header{
    width: 100%;
    height: 2.15rem;
    background: url(../img/headerBG.jpg)no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    >a:first-of-type>img{
        width: 3.9rem;
        height: 0.8rem;
        float: left;
        margin: 0.65rem 0 0 0.2rem;
    }
    >local>a{
        float: left;
        margin: 0.75rem 0 0 0.25rem;
        font-size: 0.6rem;
        color: #fff6ec;
    }
    >a:last-of-type>img{
        width: 0.85rem;
        height: 0.8rem;
        float: right;
        margin: 0.65rem 0.85rem 0 0;
    }
}
//标题结束

//搜索框开始
section:first-of-type{
    display: block;
    width: 100%;
    height: 1.8rem;
    background: rgba(0,0,0,0);
    position: absolute;
    top: 2.15rem;
    left: 0;
    z-index: 2;
    >i:first-of-type{
        font-size: 0.8rem;
        color: #fff1ff;
        float: left;
        margin: 0.65rem 0 0 0.8rem;
    }
    >input{
        width: 11rem;
        height: 1.4rem;
        border: 1px solid #ee608e;
        border-radius: 5px;
        text-align: left;
        line-height: 1.4rem;
        font-size: 0.6rem;
        color: #626262;
        text-indent: 1.5rem;
        float: left;
        margin: 0.3rem 0 0 0.75rem;
    }
    >i:last-of-type{
        font-size: 0.8rem;
        color: #d0d0d0;
        position: absolute;
        top: 0.65rem;
        left: 2.8rem;
    }
    >img{
        width: 0.975rem;
        height: 0.85rem;
        float: left;
        margin: 0.6rem 0 0 0.75rem;
    }
}
//搜索框结束

//轮播图开始
#banner{
    display: block;
    width: 100%;
    height: 7.35rem;
    overflow: hidden;
    position: relative;
    top: 2.15rem;
    left: 0;
    z-index: 1;
    >ul{
        width: 800%;
        height: 7.35rem;
        >li{
            width: 12.5%;
            height: 100%;
            float: left;
            a{
                img{
                    width: 16rem;
                    height: 7.35rem;
                }
            }
        }
    }
    >ol{
        width: 4.1rem;
        height: 0.375rem;
        position: absolute;
        left: 38%;
        bottom: 0.1rem;
        >li{
            display: inline-block;
            width: 0.35rem;
            height: 0.35rem;
            float: left;
            margin: 0 0 0 0.16rem;
            background: rgba(255,255,255,0.5);
            border-radius: 50%;
            cursor: pointer;
        }
        >li.active{
            background: rgba(255,255,255,1);
        }
    }
}
//轮播图结束

//gif图开始
section:nth-of-type(3){
    width: 100%;
    height: 4.65rem;
    position: relative;
    top: 2.15rem;
    >a{
        >img{
            width: 100%;
            height: 100%;
        }
    }
}
//gif图结束

//10个小图导航开始
section:nth-of-type(4){
    width: 100%;
    height: 6.5rem;
    position: relative;
    top: 2.15rem;
    padding: 0.4rem 0 0.55rem 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    >div{
        -webkit-box-flex: 1;
        height: 2.75rem;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        >article{
            -webkit-box-flex: 1;
            height: 2.75rem;
            text-align: center;
            >a{
                width: 1.85rem;
                height: 1.85rem;
                >img{
                    width: 1.85rem;
                    height: 1.85rem;
                }
            }
            >p{
                margin-top: 0.2rem;
                >a{
                    display: block;
                    font-size: 0.5rem;
                    font-family: "微软雅黑";
                    color: #343434;
                    text-align: center;
                    line-height: 0.5rem; 
                }
            }
        }
    }
    >div:last-child{
        margin-top: 1rem;
    }
}
//10个小图导航结束

//今日疯抢开始
section:nth-of-type(5){
    width: 100%;
    height: 9.95rem;
    border-top: 2px solid #ededed;
    border-bottom: 2px solid #ededed;
    position: relative;
    top: 2.7rem;
    >left{
        float: left;
        width: 36%;
        height: 100%;
        border-right: 2px solid #ededed;
        text-align: center;
        >.jrfqLogo{
            width: 4.6rem;
            height: 1.8rem;
            margin-top: 0.25rem;
        }
        >p{
            font-size: 0.5rem;
            color: #5d5d5d;
            margin-top: 0.1rem;
        }
        >.daojishi{
            width: 4.425rem;
            height: 0.825rem;
            margin-top: 0.25rem;
        }
        >.jrfqComm{
            width: 4.4rem;
            height: 4.55rem;
            margin-top: 0.5rem;
        }
        >section{
            width: 1.75rem;
            height: 1.75rem;
            background: #f95755;
            border-radius: 50%;
            font-size: 0.4rem;
            color: #fff;
            text-align: center;
            line-height: 1.75rem;
            margin: 2.4rem 0 0 3.7rem;
        }
    }
    >right{
        float: left;
        width: 64%;
        height: 100%;
        >top{
            width: 100%;
            height: 50%;
            border-bottom: 2px solid #ededed;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            >left{
                -webkit-box-flex: 1.5;
                >p:first-of-type{
                    font-size: 0.7rem;
                    color: #62c15b;
                    margin-top: 0.7rem;
                    padding-left: 0.55rem;
                }
                >p:nth-of-type(2),>p:nth-of-type(3){
                    font-size: 0.45rem;
                    color: #525252;
                    margin-top: 0.35rem;
                    padding-left: 0.55rem;
                }
                >p:nth-of-type(3){
                    margin-top: 0;
                }
            }
            >right{
                -webkit-box-flex: 1;
                position: relative;
                >img{
                    width: 4.1rem;
                    height: 3.7rem;
                    margin-top: 0.4rem;
                }
                >div{
                    width: 1.75rem;
                    height: 1.75rem;
                    background: #f95755;
                    border-radius: 50%;
                    position: absolute;
                    top: 0.5rem;
                    right: 0.5rem;
                    >p{
                        font-size: 0.4rem;
                        color: #fff;
                        text-align: center;
                        line-height: 0.3rem;
                        margin-top: 0.5rem;
                    }
                    >p:last-of-type{
                        margin-top: 0.2rem;
                    }
                }
            }
        }
        >bottom{
            width: 100%;
            height: 50%;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            >article{
                -webkit-box-flex: 1;
                height: 100%;
                border-right: 2px solid #ededed;
                >p{
                    font-size: 0.55rem;
                    color: #1e1e1e;
                    margin-top: 0.55rem;
                    padding-left: 0.55rem;
                }
                >p:last-of-type{
                    font-size: 0.5rem;
                    color: #5f5f5f;
                    margin-top: 0;
                }
                >img{
                    width: 3rem;
                    height: 2.85rem;
                    margin-left: 0.2rem;
                }
                
            }
            >article:last-of-type{
                border-right: none;
            }
        }
    }
}
//今日疯抢结束

//买贵赔十倍开始
section:nth-of-type(6){
    width: 100%;
    height: 3.7rem;
    position: relative;
    top: 2.7rem;
    >article{
        width: 5.8rem;
        height: 100%;
        float: left;
        text-align: center;
        >img{
            width: 4.25rem;
            height: 1.5rem;
            margin-top: 0.6rem;
        }
        >p{
            font-size: 0.5rem;
            color: #696969;
            margin-top: 0.2rem;
        }
    }
    >img{
        width: 10.1rem;
        height: 3.7rem;
        float: right;
    }
}
//买贵赔十倍结束







